<template>
	<div class="crunch">
		<div class="con">

			<div class="crun_top">
				<ul class="ul">
					<li class="li">
						<p class="yk">紧急程度</p>
						<p class="mn">{{crun_obj.urgency}}</p>
					</li>
					<li class="li">
						<p class="yk">工单状态</p>
						<p class="mn">{{crun_type === 'male' ? '待处理' : '已处理'}}</p>
					</li>
					<li class="li">
						<p class="yk">发起人员</p>
						<p class="mn">{{crun_obj.author}}</p>
					</li>
					<li class="li">
						<p class="yk">发起部门</p>
						<p class="mn">{{crun_obj.initiating}}</p>
					</li>
					<li class="li">
						<p class="yk">提交人员</p>
						<p class="mn">{{crun_author}}</p>
					</li>
					<li class="li">
						<p class="yk">提交时间</p>
						<p class="mn">{{crun_obj.add_time.slice(0,16)}}</p>
						<!-- 使用这个slice使用个错误的，但是还行可以进行使用，微信小程序常用的错误，但是可以在微信小程序中进行展示 -->
					</li>
				</ul>
			</div>
			<div class="crun_con">
				<div class="con_top">
					<div class="steps">
						<div class="step"></div>
						<div class="line"></div>
						<div class="step"></div>
					</div>
				</div>
				<div class="con_bot">
					<div>发起工单</div>
					<div>已等待12小时30分钟</div>
					<div>处理完成</div>
				</div>
			</div>
			<div class="crun_bot">
				<scroll-view scroll-x>
					<div class="top">

						<div v-for="item in crun_obj.add_list" :key="item" :class="active === item ? 'active' : ''"
							@click="tab_tit(item)">
							{{item}}
						</div>
					</div>
				</scroll-view>
				
				<div class="bot">
					<!-- <Information></Information> -->
					<CrunchBot :crun_author="crun_author" :crun_obj="crun_obj" v-if="active === '工单动态'"></CrunchBot>
					<Information :crun_type="crun_type"  :crun_author="crun_author" :crun_obj="crun_obj" v-if="active === '工单详情'"></Information>
					<Evaluate v-if="active === '评论列表'"></Evaluate>
					<Attachment :crun_author="crun_author" :crun_obj="crun_obj" v-if="active === '相关附件'"></Attachment>
					<Examine v-if="active === '查看记录'"></Examine>
				</div>
			</div>
		</div>
		<div class="cozo">
			<div class="div" @click="wjjp">
				<u-icon name="checkmark" color="#4bced0" size="20"></u-icon>
				完结订单
			</div>
			<div class="div" @click="tvhv">
				<u-icon name="close" color="#fb6260" size="20"></u-icon>
				退回工单
			</div>
			<div class="div" @click="wdqb">
				<u-icon name="map-fill" color="#999999" size="20"></u-icon>
				外勤签到
			</div>
			<div class="div" @click="ggdo">
				<u-icon name="more-dot-fill" color="#999999" size="20"></u-icon>
				更多操作
			</div>
		</div>
		<div class="cozo1"></div>
	</div>
</template>

<script>
	import CrunchBot from '@/components/crunch_bot.vue'
	import Information from '@/components/information.vue'
	import Evaluate from '@/components/evaluate.vue'
	import Attachment from '@/components/attachment.vue'
	import Examine from '@/components/examine.vue'
	export default {
		onLoad(option) {
			console.log(option)
			const {
				detail
			} = option
			const {
				information,
				type,
				author,
				time
			} = JSON.parse(detail)
			this.crun_author = author
			this.crun_type = type
			this.crun_obj = information[0]
			this.crun_time = time
			// console.log(this.crun_author)
			// console.log(this.crun_type)
			// console.log(this.crun_obj)
			// console.log(this.crun_time)
		},
		data() {
			return {
				crun_author: '', //作者 
				crun_type: '', //类型
				crun_obj: {}, //数据
				crun_time: '', //传递过来的用来进行刚开始的时间
				active: '工单动态'

			}
		},
		methods: {
			tab_tit(val) {
				this.active = val
			},
			wjjp(){
				console.log('完结工单')
				uni.navigateTo({
					url:'/pages/message/crunch/wjjp/wjjp'
				})
			},
			tvhv(){
				console.log('退回工单')
				uni.navigateTo({
					url:'/pages/message/crunch/tvhv/tvhv'
				})
			},
			wdqb(){
				console.log('外勤签到')
				uni.navigateTo({
					url:'/pages/message/crunch/wdqb/wdqb'
				})
			},
			ggdo(){
				console.log('更多操作')
			}
		},
		components: {
			CrunchBot,
			Information,
			Evaluate,
			Attachment,
			Examine,
		}
	}
</script>

<style scoped lang="scss">
	.cozo1{
		width: 100%;
		height: 100rpx;
	}
	
	.cozo {
		width: 100%;
		height: 100rpx;
		background-color: white;
		border-top: 1px solid #eee;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		position: fixed;
		bottom: 0rpx;

		// text-align: center;
		.div {
			// text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 25rpx;
		}

		.div:nth-of-type(1) {
			color: #4cced0;
		}

		.div:nth-of-type(2) {
			color: #fb6260;
		}
	}

	.steps {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 300px;
		margin: 0 auto;
		padding: 10rpx 0rpx;
	}

	.step {
		position: relative;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: gray;
		color: white;
		text-align: center;
		line-height: 20px;
		z-index: 1;
	}

	.line {
		position: relative;
		width: 100%;
		height: 2px;
		background-image: linear-gradient(to right, #52c1f5 50%, orange 50%);
		z-index: 0;
	}

	.line:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 50%;
		height: 100%;
		background-color: #52c1f5;
		z-index: 1;
	}

	.line:after {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		width: 50%;
		height: 100%;
		background-color: #e4e4e4;
		z-index: 1;
	}

	.step {
		// margin-top: 20rpx;
		width: 25rpx;
		height: 25rpx;
		border-radius: 50%;
		background-color: gray;
		color: white;
		text-align: center;
		line-height: 30px;
	}

	.step:first-child {
		background-color: #52c1f5;
	}

	.step:last-child {
		background-color: #e4e4e4;
	}

	.crunch {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		font-size: 30rpx;
		background-color: #f9f9f9;

		.crun_top {
			border-top: 1px solid #f2f2f2;
			background-color: white;

			.ul {
				width: 100%;
				height: 300rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-evenly;
				padding: 0px 20rpx;

				.li {
					width: 33.3%;
					text-align: center;

					.yk {
						margin-top: 10rpx;
						color: #d6ccd6;
					}

					.mn {
						margin-top: 10rpx;
						color: #999999;
						font-size: 28rpx;
					}
				}
			}
		}

		.crun_con {
			height: 120rpx;
			width: 100%;
			margin-top: 20rpx;
			background-color: white;
			padding: 10px 30rpx;
			color: #cfd0db;

			.con_bot {
				width: 100%;
				display: flex;
				font-size: 25rpx;
				justify-content: space-between;
			}
		}

		.crun_bot {
			width: 100%;
			height: auto;
			margin-top: 40rpx;
			background-color: white;
			

			.active {
				color: #3478f7;
			}

			.top {
				width: 120%;
				height: 80rpx;
				display: flex;
				font-size: 30rpx;
				justify-content: space-evenly;
				align-items: center;
			}

		}
	}
</style>